<template>
    <el-dialog append-to-body :visible.sync="open" width="60%" :before-close="handleClose" class="demandFormVisible_dialog" >
        <template slot="title">
            <div style="">项目内件层</div>
        </template>
        <el-row>
            <el-col :span="1.5" style="margin:20px 0">
                <el-button type="primary" plain icon="el-icon-plus"  @click="handleAddTap">添加</el-button>
            </el-col>
        </el-row>
        <tableList v-if="tableHeaderList.length > 0" :tableHeaderList="tableHeaderList" :tableData="tableData"
            :loading="loading" :tableHeight="tableHeight" @celldblclick="celldblclick" @sortChange="sortChange"
            @handleSelectionChange="handleSelectionChange">
        </tableList>
        <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
            @pagination="getjianlistbyitemIdPOST" />
        <!--start  组件详情 -->
        <!-- <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="dataInfoCell2"
              @detailsHandleClose="detailsHandleClose">
         </jianDetailsOpen> -->
        <!--end 组件详情 -->
    </el-dialog>
</template>
<script>
import { getshowfield, getjianlistbyitemId, bindFolderIdDaId } from "@/api/archive/fileCollection/offlinReception.js";
import '@/assets/styles/index.scss' // global css
import tableList from "@/components/tableList/index.vue"
import jianDetailsOpen from '@/components/componentsJianDetails/index.vue' //件详情
import { getLastIndexOf } from "@/utils/index.js"
export default {
    props: ["openInfo", "open", "parentId"],
    components: {
        tableList,
        //  jianDetailsOpen,
    },
    watch: {
        parentId: {
            handler(valNew) {
                 console.log(valNew, "+++++88++++++++++")

            }, immediate: true
        },
        openInfo: {
            handler(valNew) {
                console.log(valNew, "+++++++++++++++")
                this.tableHeightData();
                this.getlistHeaderPost(valNew);

            }, immediate: true
        },
    },
    data() {
        return {

            tableHeaderList: [], //table表头数据
            tableData: [],//table列表数据
            total: 0,
            loading: false,
            tableHeight: "",
            jianDetailsOpen: false,//件详情弹窗
            order: "",//排序
            pageNum: 1,
            pageSize: 10,
            ids: [],
            single: true,
            multiple: true,
        }
    },
    methods: {

        //是否选择数据
        handleSelectionChange(ids, single, multiple) {
            this.ids = ids.toString();
            this.single = single;
            this.multiple = multiple;
        },
        /**获取table表头数据 */
        getlistHeaderPost(data) {
            getshowfield({
                categoryId: data.categoryId,
                menuId: data.menuId,
                level: "jian",
            }
            ).then(response => {
                this.tableHeaderList = response.data;
                var fields = []
                for (var i in response.data) {
                    fields.push(response.data[i].FIELD_NAME)
                }
                this.fields = fields;
                this.getjianlistbyitemIdPOST();
            });
        },
        /**
             * 项目下的件层
             * 获取table数据*/
        getjianlistbyitemIdPOST() {
            // console.log(this.openInfo,this.parentId, "888")
            getjianlistbyitemId({
                fields: this.fields.toString(),
                categoryId: this.openInfo.categoryId,
                itemId: this.openInfo.itemId,
                menuId: this.openInfo.menuId,
                order: this.order,
                isDel: "0",
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }).then(response => {
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },

        //  //动态设置table的高度
        tableHeightData() {
            this.$nextTick(
                () => {
                    let h = 650;

                    //  h = h + 100
                    if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
                        h = h - this.$refs.queryForm.$el.offsetHeight
                    }

                    if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
                        h = h - this.$refs.refbut.$el.offsetHeight
                    }
                    this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度
                    return h
                }
            )
        },

        //  //关闭
        handleClose() {
            this.$emit("detailsHandleClose")
        },

        //添加
        handleAddTap() {
            var that=this;
            if (!this.multiple) {
                // 如果已经著录卷 有卷ID   绑定卷和件的关系
                if (this.parentId != undefined) {
                    bindFolderIdDaId({
                        folderId: this.parentId,
                        daIds: this.ids,
                        categoryId: this.openInfo.categoryId,
                    }).then(function (res) {
                        that.$emit("handleAddTap", that.ids)
                    })
                }

              
            } else {
                this.$message({ message: '请选择要添加的数据哦', type: 'warning' })
            }
        },

        //  //双击列表进入件详情页面
        celldblclick(row) {
            var subTableName = ""
            if (getLastIndexOf(this.queryParams.subTableName) == "F") {  //F 件
                subTableName = ""
            } else if (getLastIndexOf(this.queryParams.subTableName) == "V") { //卷
                subTableName = this.categoryInfo.fileTableName
            } else { //项目
                subTableName = this.categoryInfo.folderTableName
            }

            this.dataInfoCell2 = {
                id: row.ID,
                categoryId: this.queryParams.categoryId,
                menuId: this.queryParams.menuId,
                substr: subTableName,
                label: this.dataInfoCell.label,
                level: 1,
                ifSub_table_name: this.dataInfoCell.ifSub_table_name,
                isDel: this.dataInfoCell.isDel,
               
            }
            this.jianDetailsOpen = true; //入件详情页面   


        },





        //  //关闭组件详情页面
        //  detailsHandleClose() {
        //       this.jianDetailsOpen = false;
        //       this.projectjuanDetailsOpen = false;


        //  },

        //  //排序
        sortChange(val) {
            this.order = val;
            this.getjianlistbyitemIdPOST();
        },

    }
}
</script>

<style lang="less" scoped>
ul,
li,
p,
div {
    padding: 0;
    margin: 0;
}

/deep/.el-tabs--border-card>.el-tabs__content {
    padding: 0 !important;
}









.headerInfoButton {
    position: absolute;
    top: 16px;
    right: 60px;
}

::v-deep .el-dialog__body {
    padding: 10px 20px 25px !important;
}

.margin_t {
    margin-top: 10px;
}

.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-row-bowtte {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.itemList {
    padding: 10px 15px 10px;
}

.itemList p {
    line-height: 38px;
    display: block;
}

.demandFormVisible_dialog {
    .el-dialog__wrapper {
        pointer-events: none;

        ::v-deep .el-dialog {
            pointer-events: auto;
        }
    }
}
</style>
